<!--
@description    绩效管理员首页
@author         秦俊强
@email          458112865@qq.com
@create         2020-02-25 20:00
-->

<template>
  <div class="ant-card ant-card-body">

    <!-- 菜单区 start -->
    <div class="menu-box">
      <div class="query-date">
        <span style="font-weight: bold;">考核期：{{ yearMonthList.val.text }}</span>

        <!-- 可选日期 start -->
        <!--<a-select v-if="!yearMonthList.loading"
                  :value="yearMonthList.val.text"
                  @change="changeDate">
          <a-select-option v-for="date in yearMonthList.arr"
                           :key="date.value">{{ date.text }}</a-select-option>
        </a-select>-->
        <!-- 可选日期 end -->

        <!-- 数据加载时 -->
        <!--<a-select v-else :defaultValue="'数据加载中'" disabled></a-select>-->
      </div>
    </div>
    <!-- 菜单区 end -->



    <!-- 内容区 start -->
    <div class="content-box">

      <!-- 概览信息 start -->
      <div class="table-view">
        <div class="title">
          <span>进度-概览</span>
        </div>

        <!-- 进度 start -->
        <div class="view-box">
          <KpiProgressOn ref="progressOn" :yearMonth="yearMonthList.val"></KpiProgressOn>
        </div>
        <!-- 进度 end -->
      </div>
      <!-- 概览信息 end -->


      <!-- 详细信息 start -->
      <div class="table-detail">
        <div class="title">
          <span>进度-详情</span>
        </div>

        <!-- 列表 start -->
        <div class="view-box">
          <a-table :loading="tableData.loading"
                   :scroll="tableData.scroll"
                   :columns="tableData.columns"
                   :dataSource="tableData.dataSource"
                   :pagination="false" bordered></a-table>
        </div>
        <!-- 列表 end -->
      </div>
      <!-- 详细信息 end -->
    </div>
    <!-- 内容区 end -->

  </div>
</template>



<script>

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /**
   * api 接口
   *
   * getYearMonthList => 获取考核期列表
   * getKaProgressDetail => 获取进度-详情
   * */
  import { getYearMonthList, getKaProgressDetail } from '@/api/api.js';

  /* 引入进度概览组件 */
  import KpiProgressOn from './components/KpiProgressOn';





  export default {
    components: { KpiProgressOn },

    data() {
      return {
        /* 年下拉菜单 */
        yearMonthList: {
          loading: true,
          arr: [],    // 可选择的年份列表
          val: {}     // 已选年，默认数组第 0 个
        },

        /* 详情表格 */
        tableData: {
          loading: true,
          scroll: { x: true },
          columns: [],
          dataSource: []
        }
      }
    },

    created() { this.getYearMonthList(); },

    methods: {

      /* 监听考核期的变化 */
      changeDate(code) {
        let arr = this.yearMonthList.arr;
        this.yearMonthList.val = arr.find((item) => { return (item.value === code); });

        this.$refs.progressOn.getKaProgressView();  // 通知子组件更新进度概览
        this.getKaProgressDetail();                 // 获取详情列表
      },

      /* 返回表头参数 */
      getTabHeader(arr) {
        let header = [];

        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          header.push({
            title: item.name,
            align: 'center',
            dataIndex: item.code
          });
        }

        return header;
      },

      /* 获取【详情】列表 */
      getKaProgressDetail() {
        let param = { indexYearMonth: this.yearMonthList.val }

        this.tableData.loading = true;
        apiService(getKaProgressDetail(param)).then((res) => {
          this.tableData.loading = false;

          if (!res.success) {
            this.tableData.dataSource = [];
            this.$message.warning(res.message);
            return;
          }

          let result = res.result;

          this.tableData.columns = this.getTabHeader(result.items);
          this.tableData.dataSource = result.values;
        }).catch((error) => {
          this.tableData.loading = false;
          this.tableData.dataSource = [];
          this.$message.error(error.message);
        });
      },

      /* 获取考核期下拉选项 */
      getYearMonthList() {
        this.yearMonthList.loading = true;
        apiService(getYearMonthList()).then((res) => {
          let list = res.result || [];

          this.yearMonthList = {
            loading: false,
            arr: list || [],
            val: list[0] || {}
          };

          this.$refs.progressOn.getKaProgressView();  // 通知子组件更新进度概览
          this.getKaProgressDetail();                 // 获取详情列表
        }).catch((error) => {
          this.yearMonthList.loading = false;
          this.$message.error(error.message);
        });
      }

    }
  }
</script>





<style lang="less" scoped>
  .menu-box {
    padding: 5px 10px 15px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e7e7e7;
  }

  .content-box {
    padding-left: 20px;

    .table-view, .table-detail {
      margin-bottom: 80px;

      .title {
        padding: 5px 5px 15px 5px;
        font-size: 16px;
        margin-bottom: 15px;
        border-bottom: 1px solid #e7e7e7;
        font-weight: bold;
      }
    }

    /deep/.ant-table th,
    /deep/.ant-table td { white-space: nowrap; }

    /deep/.ant-table-tbody .ant-table-row td { padding: 10px; }

    .pagination-box {
      margin-top: 20px;
      float: right;
    }

  }
</style>
